import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";

Vue.use(VueRouter);

const routes = [
	{
		path: "/",
		name: "Home",
		component: Home,
	},
	{
		path: "/about",
		name: "About",
		// route level code-splitting
		// this generates a separate chunk (about.[hash].js) for this route
		// which is lazy-loaded when the route is visited.
		component: () =>
			import(/* webpackChunkName: "about" */ "../views/About.vue"),
	},
	{
		path: "/barChart",
		name: "BarChart",
		component: () =>
			import(/* webpackChunkName: "about" */ "../views/echarts-example"),
	},
	{
		path: "/chartTest",
		name: "ChartTest",
		component: () =>
			import(/* webpackChunkName: "about" */ "../views/chartTest/index.vue"),
	},
	{
		path: "/fabric",
		name: "Fabric",
		component: () => import(/* webpackChunkName: "about" */ "../views/Fabric"),
	},
	{
		path: "/test",
		name: "Test",
		component: () =>
			import(/* webpackChunkName: "about" */ "../views/Test/index.vue"),
	},
	{
		path: "/canvas",
		name: "Canvas",
		component: () =>
			import(/* webpackChunkName: "about" */ "../views/Canvas/index.vue"),
	},
	{
		path: "/zoomDrag",
		name: "ZoomDrag",
		component: () =>
			import(/* webpackChunkName: "about" */ "../views/ZoomDrag"),
	},
	{
		path: "/hostChart",
		name: "HostChart",
		component: () =>
			import(/* webpackChunkName: "about" */ "../views/HostChart"),
	},
	{
		path: "/treeStructure",
		name: "TreeStructure",
		component: () =>
			import(/* webpackChunkName: "about" */ "../views/TreeStructure"),
	},
	{
		path: "/js-caozuo-css",
		name: "js-caozuo-css",
		component: () =>
			import(/* webpackChunkName: "about" */ "../views/js-caozuo-css"),
	},
];

const router = new VueRouter({
	mode: "history",
	base: process.env.BASE_URL,
	routes,
});

export default router;
